<template>
  <div class="pageTitle">
    <div class="tit">{{$route.meta.title}}</div>
    <div class="menu">
      <template v-for="(item, i) in menu">
        <div class="item" v-if="i<=7" :class="{'_l': i<=3, '_r': i>3 && i<=7, cur: item.name === $route.name}">
          <span @click="goToRoute(item)">{{item.meta.title}}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pageTitle',
    components: {},
    props: {
      menu: {
        type: Array,
        default: []
      }
    },
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      goToRoute(route){
        if(route.name !== this.$route.name){
          this.$router.push({ path: route.path })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .pageTitle {
    width: 100%; height: 100%; background: url('~@/assets/img/pageTitleBg.svg') center no-repeat;
    /*display: flex; justify-content: center;*/
    position: relative;
    .tit {
      font-size: 48px; font-family: PingFangSC; font-weight: bold; letter-spacing: 5.05px; margin-top: 10px;
      position: absolute; left: 50%; transform: translateX(-50%);
    }
    .menu {
      display: flex; align-items: center;
      padding: 54px 24px 0;
      .item {
        width: 138px; height: 40px; display: flex; align-items: center; justify-content: center;
        transition: all .3s;
        span {
          cursor: pointer; color: #53E2FF; font-size: 16px; font-family: PingFangSC; letter-spacing: 0.96px; transition: all .3s;
        }
        &:nth-child(5) { margin-left: auto; }

        &._l {
          background: url('~@/assets/img/menu_l.svg') center no-repeat;
          &+._l { margin-left: -10px;}
          &:hover, &.cur {
            background: url('~@/assets/img/menu_l_h.svg') center no-repeat;
            span {
              color: #B4F2FF;
            }
          }
        }
        &._r {
          background: url('~@/assets/img/menu_r.svg') center no-repeat;
          margin-right: -10px;
          &:last-child { margin-right: 0; }
          &:hover, &.cur {
            background: url('~@/assets/img/menu_r_h.svg') center no-repeat;
            span {
              color: #B4F2FF;
            }
          }
        }
      }
    }
  }
</style>
